<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性布局</title>
    <style>
        .container{
            width: 600px;
            height: 400px;
            background: pink;
            border: 5px solid skyblue;
            margin:  50px auto;
            display: flex;
            /* 主轴方向 */
            /* 更改主轴以及起点与终点 */
            /* 主轴为垂直方向，起点在上沿。 */
            flex-direction: column;

            /* 与 column 相同，但是以相反的顺序。主轴为垂直方向，起点在下沿 */
            flex-direction: column-reverse;
            /* 与 row 相同，但是以相反的顺序。主轴为水平方向，起点在右端	 */
            flex-direction: row-reverse;

            /* 是否换行 */
            /* 默认；不换行 */
            flex-wrap: nowrap;
            /* 换行 */
            flex-wrap: wrap;

            /* 复合属性 */
            flex-flow: column wrap;
        }
        .box{
            width:80px;
            height: 80px;
            font-size: 40px;
            text-align: center;
            line-height: 80px;
            background: green;
            color: #FFF;
            border: 2px solid gold;
        }
        .demo{
            width: 1200px;
            height: 50px;
            background: tomato;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
        <div class="box box4">4</div>
        <div class="box box5">5</div>
        <div class="box box6">6</div>
        <div class="box box7">7</div>
        <div class="box box8">8</div>
        <div class="box box9">9</div>
        <div class="box box10">10</div>
        <div class="box box11">11</div>
        <div class="box box12">12</div>
        <div class="box box13">13</div>
        <div class="box box14">14</div>
        <div class="box box15">15</div>
        <div class="box box16">16</div>
        <div class="box box17">17</div>
        <div class="box box18">18</div>
        <div class="box box19">19</div>
        <div class="box box20">20</div>
    </div>

    <div class="demo"></div>
</body>

</html>